<route lang="json5">
{
	style: {
		onReachBottomDistance: 100,
	},
}
</route>

<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./search.title";
import Form from "@/components/StorageForm/index";
import List from "@/components/List/index.vue";
import { storageService } from "@/service/storage";

const Basic = Form.BasicForm;

const searchValue = ref();

const defaultParams = reactive({
	keyword: "",
});

onReachBottom(() => {});

const handleSearch = () => {
	defaultParams.keyword = searchValue.value;
};

const handleCheck = (id) => {
	uni.navigateTo({ url: `/pages/logisticsDetail/index?id=${id}` });
};
const handleEdit = (id) => {
	uni.navigateTo({ url: `/pages/logisticsEdit/index?id=${id}` });
};
</script>

<template>
	<ViewContainer :title="titleConfig" innerClass="outbound-page">
		<view class="search" id="search-bar">
			<wd-search v-model="searchValue">
				<template #suffix>
					<wd-button class="search-btn" :round="false" @click="handleSearch"
						>搜索</wd-button
					>
				</template>
			</wd-search>
		</view>

		<view class="outer-divider"></view>

		<List
			:fetchMehod="storageService.getAllCarList"
			:defaultParams="defaultParams"
		>
			<template #listItem="props">
				<Basic :data="props.data" :type="'show'" :showTitle="false" :simple="true">
					<template #extra>
						<view class="button-group">
							<template v-if="props.data?.transportStatus === 'DELIVERY'">
								<wd-button
									@click="() => handleEdit(props.data?.id)"
									:round="false"
									>编辑</wd-button
								>
							</template>
							<wd-button
								:round="false"
								@click="() => handleCheck(props.data?.id)"
								>查看</wd-button
							>
						</view>
					</template>
				</Basic>
				<div class="divider"></div>
			</template>
		</List>
	</ViewContainer>
</template>

<style lang="less" scoped>
.divider {
	width: 100%;
	height: 40px;
}

.search {
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 100;
	transform: translateY(-30px);
}

.search-btn {
	width: 150px;
	margin: 0 20px;
}

.outer-divider {
	width: 100%;
	height: 130px;
}

.button-group {
	display: flex;
	justify-content: flex-end;

	.wd-button {
		margin: 0;
		width: 200px;

		&:first-child {
			margin-right: 20px;
		}
	}
}
</style>
